@extends('_layouts.admin')

{{--页面标题--}}
@section('title')Login @stop

{{--body样式追加--}}
@section('body-class')class="page-body login-page"@stop

{{--body--}}
@section('body')
    <div class="login-container">

        <div class="row">

            <div class="col-sm-6">

                <script type="text/javascript">
                    jQuery(document).ready(function($)
                    {
                        // Reveal Login form
                        setTimeout(function(){ $(".fade-in-effect").addClass('in'); }, 1);


                        // Validation and Ajax action
                        $("form#login").validate({
                            rules: {
                                username: {
                                    required: true
                                },

                                password: {
                                    required: true
                                }
                            },

                            messages: {
                                username: {
                                    required: 'Please enter your username.'
                                },

                                password: {
                                    required: 'Please enter your password.'
                                }
                            },

                            // Form Processing via AJAX
                            submitHandler: function(form)
                            {
                                show_loading_bar(70);

                                var opts = {
                                    "closeButton": true,
                                    "debug": false,
                                    "positionClass": "toast-top-full-width",
                                    "onclick": null,
                                    "showDuration": "300",
                                    "hideDuration": "1000",
                                    "timeOut": "5000",
                                    "extendedTimeOut": "1000",
                                    "showEasing": "swing",
                                    "hideEasing": "linear",
                                    "showMethod": "fadeIn",
                                    "hideMethod": "fadeOut"
                                };

                                $.ajax({
                                    url: "{{ url('admin/ajax/login') }}",
                                    method: 'POST',
                                    headers:{
                                        'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                                    },
                                    dataType: 'json',
                                    data: {
                                        username: $(form).find('#username').val(),
                                        password: $(form).find('#password').val(),
                                    },
                                    success: function(resp)
                                    {
                                        show_loading_bar({
                                            delay: .5,
                                            pct: 100,
                                            finish: function(){
                                                if(resp.granted)
                                                {
                                                    window.location.href = resp.url;
                                                }
                                                else
                                                {
                                                    toastr.error(resp.msg, "Invalid Login!", opts);
                                                    $("#password").select();
                                                }
                                            }
                                        });

                                    },
                                    error: function(error)
                                    {
                                        show_loading_bar({
                                            delay: .5,
                                            pct: 100,
                                            finish: function(){
                                                error = error.responseJSON;

                                                for (var o in error) {
                                                    var errDom = $('#'+o);

                                                    errDom.addClass('error');

                                                    toastr.error(error[o][0], "Error!", opts);
                                                }
                                            }
                                        });
                                    }
                                });

                            }
                        });

                        // Set Form focus
                        $("form#login .form-group:has(.form-control):first .form-control").focus();
                    });
                </script>

                <!-- Add class "fade-in-effect" for login form effect -->
                <form method="post" role="form" id="login" class="login-form fade-in-effect">

                    <div class="login-header">
                        <a href="dashboard-1.html" class="logo">
                            <img src="{{ asset('assets/images/logo@2x.png') }}" alt="" width="80" />
                            <span>log in</span>
                        </a>

                        <p>Dear user, log in to access the admin area!</p>
                    </div>


                    <div class="form-group">
                        <label class="control-label" for="username">Username</label>
                        <input type="text" class="form-control input-dark" name="username" id="username" autocomplete="off" />
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="password">Password</label>
                        <input type="password" class="form-control input-dark" name="password" id="password" autocomplete="off" />
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-dark  btn-block text-left">
                            <i class="fa-lock"></i>
                            Log In
                        </button>
                    </div>

                    <div class="login-footer">
                        <a href="#">Forgot your password?</a>

                        <div class="info-links">
                            <a href="#">ToS</a> -
                            <a href="#">Privacy Policy</a>
                        </div>

                    </div>

                </form>

                <!-- External login -->
                <div class="external-login">
                    <a href="#" class="facebook">
                        <i class="fa-facebook"></i>
                        Facebook Login
                    </a>

                    <a href="#" class="twitter">
                        <i class="fa-twitter"></i>
                        Login with Twitter
                    </a>

                    <a href="#" class="gplus">
                        <i class="fa-google-plus"></i>
                        Login with Google Plus
                    </a>
                </div>
            </div>
        </div>
    </div>
    @stop

{{--底部JS--}}
@section('after-body')
    @parent
    <script src="{{ asset('assets/js/xenon-custom.js') }}"></script>
    @stop